$(function () {
  // cropper 图片裁剪
  // 获取裁剪区的 DOM 元素
  var $image = $("#image");
  // 配置选项
  const options = {
    // 纵横比 也就是裁剪比例
    aspectRatio: 1,
    // 置顶预览区域
    preview: ".img-preview",
  };
  // 创建裁剪区域
  $image.cropper(options);

  // 点击弹出文件选择框
  $("#btnChooseImage").click(function () {
    $("#file").click();
  });

  // 为文件选择框绑定 change 事件,用户选择了文件就会触发这个事件
  $("#file").on("change", function (e) {
    // 通过e.target.files获取用户选择的文件列表
    var filelist = e.target.files;
    // 如果文件列表的长度为零,就提示用户 请选择图片
    if (filelist.length === 0) {
      return layui.layer.msg("请选择照片");
    }
    // 1. 通过索引为0拿到用户选择的文件
    var file = filelist[0];
    var imgURL = URL.createObjectURL(file);
    // 3. 重新初始化裁剪区域
    $image
      .cropper("destroy") // 销毁旧的裁剪区域
      .attr("src", imgURL) // 重新设置图片路径
      .cropper(options); // 重新初始化裁剪区域
  });

  // 将裁剪后的头像上传到服务器
  // 为确定按钮，绑定点击事件
  $("#upload").on("click", function () {
    //   创建一个base64类型的字符串图片
    var dataURL = $image
      .cropper("getCroppedCanvas", {
        // 创建一个 Canvas 画布
        width: 100,
        height: 100,
      })
      .toDataURL("image/png");
    // 调用接口,把头像上传到服务器
    $.ajax({
      type: "POST", //默认get
      url: "/my/update/avatar", //默认当前页
      data: {
        avatar: dataURL,
      },
      success: function (res) {
        //请求成功回调
        if (res.status !== 0) {
          return layui.layer.msg(res.message);
        }
        layui.layer.msg(res.message);
        //  调用父页面的方法,重新渲染用户的头像和用户信息
        window.parent.getUserInfo();
      },
    });
  });
});
